﻿<!DOCTYPE html>
<html>
<head>
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
<meta content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>{$t.name}</title>
<meta name="keywords" content="" />
<meta name="description" content=""/>

<link rel="stylesheet" type="text/css" href="{:_SKIN}/weixin/shopv3/css/pre_foot_1.css">
<link rel="stylesheet" type="text/css" href="{:_SKIN}/weixin/shopv3/css/pro-detail_1.css">
<link rel="stylesheet" type="text/css" href="{:_SKIN}/weixin/shopv3/css/font-awesome.min_1.css">
<link rel="stylesheet" type="text/css" href="css/showbox_1.css">
<link rel="stylesheet" href="{:_SKIN}/weixin/shopv3/css/layer_1.css" id="layuicss-skinlayercss">
<script src="{:_SKIN}/weixin/shopv3/js/showbox_1.js"></script>
<script src="{:_SKIN}/weixin/shopv3/js/jquery_1.js"></script>
<script type="text/javascript" src="{:_SKIN}/weixin/shopv3/js/layer_1.js"></script>

<script src="{:_SKIN}/weixin/shopv3/js/time_common_1.js" type="text/javascript"></script>
	<script src="{:_SKIN}/weixin/car/js/vue.min.js" type="text/javascript"></script>
	<script src="{:_SKIN}/weixin/car/js/axios.min.js" type="text/javascript"></script>
<script type="text/javascript">
function gm(){


    $("#mask,#s_buy").toggle();


}
$(function(){
	showLoadMaskLayer();
})

$(document).ready(function(){
	hiddenLoadMaskLayer();
	//编写代码
});
function gw(){


    $("#mask,#g_buy").toggle();


}
$(function(){
    showLoadMaskLayer();
})

$(document).ready(function(){
    hiddenLoadMaskLayer();
    //编写代码
});





//显示加载遮罩层
function showLoadMaskLayer(){
	$(".mask-layer-loading").fadeIn(300);
}

//隐藏加载遮罩层
function hiddenLoadMaskLayer(){
	$(".mask-layer-loading").fadeOut(300);
}
</script>
<style>
body{
	max-width: 640px;
}
body .sub-nav.nav-b5 dd i {margin: 3px auto 5px auto;}
body .fixed.bottom {bottom: 0;}
.mask-layer-loading{position: fixed;width: 100%;height: 100%;z-index: 999999;top: 0;left: 0;text-align: center;display: none;}
.mask-layer-loading i,.mask-layer-loading img{text-align: center;color:#000000;font-size:50px;position: relative;top:50%;}
.sub-nav.nav-b5 dd{width:25%;font-size:14px;}
</style>

<link rel="stylesheet" type="text/css" href="{:_SKIN}/weixin/shopv3/css/mall_1.css">
<link rel="stylesheet" type="text/css" href="{:_SKIN}/weixin/shopv3/css/pre_foot_1.css">
<link rel="stylesheet" type="text/css" href="{:_SKIN}/weixin/shopv3/css/goods_detail_1.css">
<script src="{:_SKIN}/weixin/shopv3/js/goods_product_1.js"></script>


<script src="{:_SKIN}/weixin/shopv3/js/jquery.lazyload_1.js" type="text/javascript"></script>
<style>
.js-shelves {
	display: none;
}
</style>

</head>
<input type="hidden" id="niushop_rewrite_model" value="1">
<input type="hidden" id="niushop_url_model" value="1">
<input type="hidden" id="niushop_admin_model" value="admin">

<body class="body-gray">
	<div id="order">
<section class="head">
	<a class="head_back" onclick="window.history.go(-1)" href="javascript:void(0)"><i class="icon-back"></i></a>
	<div class="head-title">商品详情</div>
</section>

	<div class="motify" style="display: none;"><div class="motify-inner">弹出框提示</div></div>
	
	<link rel="stylesheet" type="text/css" href="{:_SKIN}/weixin/shopv3/css/scroll_1.css">
<link rel="stylesheet" type="text/css" href="{:_SKIN}/weixin/shopv3/css/detail_1.css">
<link rel="stylesheet" type="text/css" href="{:_SKIN}/weixin/shopv3/css/components_1.css">
<script src="{:_SKIN}/weixin/shopv3/js/scroll_1.js" type="text/javascript"></script>

<style>
.address-select{
	width: 30%;
    float: left;
    border: 1px solid #e5e5e5;
	height: 20px;
    line-height: 20px;
    margin: 5px 15px;
    margin-left: 0;
}
.give-the-thumbs-up{
	position: absolute;
	top: 0px;
	right: 10px;
	text-align: center;
	font-size: 12px;
	margin-top: 13px;
}
.give-the-thumbs-up i{
	font-size: 21px;
}
</style>
<!-- 商品详情 -->
<div class="h50" style="height:45px;"></div>
<section id="banner">
	<div class="shop_slider shop_slider_auto" data-tag="module-slider" data-height="320px">
		<div class="inner" data-tag="slider-warp" >
			<ul class="pic_list" data-tag="slider-list">
				<li style="width: 320px;">
					<div>
						<img class="pp_init_img" src="{$t.pic}?imageMogr2/thumbnail/400x400!" />
					</div>
				</li>
				{notempty name="t.pic1"}
				<li style="width: 320px;">
					<div>
						<img class="pp_init_img" src="{$t.pic1}?imageMogr2/thumbnail/400x400!" />
					</div>
				</li>
				{/notempty}
				{notempty name="t.pic2"}
				<li style="width: 320px;">
					<div>
						<img class="pp_init_img" src="{$t.pic2}?imageMogr2/thumbnail/400x400!" />
					</div>
				</li>
				{/notempty}
				{notempty name="t.pic3"}
				<li style="width: 320px;">
					<div>
						<img class="pp_init_img" src="{$t.pic3}?imageMogr2/thumbnail/400x400!" />
					</div>
				</li>
				{/notempty}
				{notempty name="t.pic4"}
				<li style="width: 320px;">
					<div>
						<img class="pp_init_img" src="{$t.pic4}?imageMogr2/thumbnail/400x400!" />
					</div>
				</li>
				{/notempty}
						</ul>
		</div>
		<div class="bar_wrap">
			<ul class="bar" data-tag="slider-page">
				<li class="cur"></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>
</section>
<input type="hidden" id="ms_time" value="1507545843000"/>
<div class="buy_area">
	<div class="fn_wrap" style="position: relative;">
		<h1 class="title" id="itemName" style="width: 80%;">{$t.name}</h1>
		<span style="position: absolute;display: block;height: 39px;background: #d5d5d5;width: 1px;top: 14px;right: 47px;"></span>

		       <span onclick="clickPoint()" class="give-the-thumbs-up">
		        <i class="fa fa-thumbs-up"></i><br/>点赞	</span>
	</div>
	<div class="price_wrap">
		<span class="tit" id="priceTitle"></span> 
		<span class="price">
          {empty name="list"}
          <span style="font-size:14px;display: inline-block;vertical-align: middle;">￥</span>
			{$t.price}</span>
          {else /}
          <span style="font-size:14px;display: inline-block;vertical-align: middle;">￥</span>
			{$list[0]['price']}~{$list[count($list)-1]['price']}</span>
          	{/empty}
		<span style="float: right;color:#999;font-size: 12px"> 库存：999</span>
	 </div>
	  <hr class="with-margin-l" />
	<div style="padding:8px 12px;font-size: 12px ">运费说明：{$t.yfdesc}</div>
</div>
<hr class="with-margin-l" />
<div style="padding:8px 12px;font-size: 12px; margin-top: 10px" onclick="gm()">选择：规格
<span style="float: right;margin-right: 5px;font-size: 14px">></span>
</div>
<hr class="with-margin-l" />
<hr class="divider-line" />
	<div class="mod_tab_wrap">
		<div class="mod_tab" id="detailTab">
			<span onclick="showProperty(this,1)" class="cur" style="text-align: left; padding-left: 14px">商品详情</span>
		</div>
	</div>
	<!-- 商品详情 -->
	<div class="detail_info_wrap" id="p-detail">
		<div class="detail_list" id="content">
			{$t.content}
		</div>
	</div>
	<!-- 商品属性 -->
	<div class="detail_info_wrap p-attribute" id="p-attribute" style="display:none;" >
					<ul class="attribute-ul">
						<li>
							<em>规格：</em>
							<span id="goods_attr_" title="白色" class="goods-attr-value">白色</span>
						</li>
					</ul>
	</div>
	
	<!-- 商品评论 -->
	<div class="comment-type" id="productproperty" style="display:none;">
		<ul class="tab-nav">
			<li class="productproperty-list current" data-type="0" >全部<em>(2)</em></li>
			<li class="productproperty-list" data-type="1" >好评 <em>(2)</em></li>
			<li class="productproperty-list" data-type="2" >中评 <em>(0)</em></li>
			<li class="productproperty-list" data-type="3" > 差评 <em>(0)</em></li>
		</ul>
		<!-- 评论展示 -->
		<div id="comment_content">
			<div class="comment-con"></div>
		</div>
	</div>
	<style>
.footer {
	margin: 0 0 45px 0;
	padding: 0;
	min-height: 1px;
	text-align: center;
	line-height: 16px;
	background-color: #f8f8f8;
}
.ft-copyright {
	padding: 20px 0 20px;
	margin: 0 15px;
	font-size: 12px;
}

.ft-copyright img {
	width: 110px;
	height: 30px;
	display: block;
	margin: 0 auto;
}

</style>
	<!-- 弹出框 -->
	<div class="success-tip-line"  id="success_tip_line" style="display: none;">成功加入购物车！</div>
		<div v-show="showToast" class="prompt prompt_addcar" style="display:block;">{{promptText}}</div>
	<div class="mask" id="mask" style="display: none;"></div>
	<span id="addcart_way" style="display: none;"><i></i></span>
	<section class="s-buy" id="s_buy">
		<div class="popup"  id="popup" style="-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px;display:none "></div>
		<ul class="s-buy-ul">
			<li class="s-buy-pro">
				<span class="pro-img">
					<input type="hidden" id="default_img" value="90" />
					<img src="{$t.pic}">
				</span>
				<div class="pro-info">
					<p class="name" id="spname" >{$t.name}</p>
					<!-- <p class="pro-price" id="price">￥{$t.price}	</p> -->
				</div>
				<i class="icon-close" id="icon_close" onclick="gm()"></i>
			</li>
		</ul>
		<hr class="with-margin-l" />
		<ul class="s-buy-ul specification" id="specification" style="z-index: 9000;">
			<li class="s-buy-li" >
				<div class="right" name="specvals" >
					{volist name="list" id="v"}
						<button class="select  gg" data-price="{$v.price}" data-id="{$v.id}" name="Span1">
							{$v.name}
						</button>
					 {/volist}
				</div>
			</li>
			<hr class="with-margin-l" />
			<input type="hidden" id="goods_sku_num" value="100">
			<li class="s-buy-li">
				<div class="left" style="float:left;">购买数量：</div>
				<div class="right">
					<span class="reduce quantity-minus-disabled" >-</span>
					<input class="number" name="quantity"  autocomplete="off" value="1" min="1" max="2000" id="num" />
					<span class="add" >+</span>
				</div>
				<!-- <span style="display: inline-block;margin-top:5px;color:#333;" id="Stock">剩余2000件</span> -->
			</li>
		</ul>
		<ul class="s-buy-ul">
			<li class="s-buy-btn">
				<a class="btn"  tag="buyBtn1" onclick="getorder()">立即购买</a>
				<input id="hiddPDetailID" type="hidden" value="59"/>
				<input id="hiddSkuId" type="hidden" />
				<input id="hiddSkuName" type="hidden" />
				<input id="hiddSkuprice" type="hidden" />
				<input id="hiddStock" type="hidden" value="2000"/>
				<input type="hidden" id="hidden_shop_name" value=""/>
				<input type="hidden" id="hidden_shop_id" value="0"/>
				<input type="hidden" id="is_sale" value="1" />
				<input type="hidden" id="goods_id" value="59" />
				<input type="hidden" id="code" value="76434700087" />
				<input type="hidden" id="max_buy" value="0" />
				<input type="hidden" id="min_buy" value="0" />
				<input type="hidden" id="hidden_current_num" value="0" />
				<input type="hidden" name="" value="{$t.price}" id="s_dj">
			</li>
		</ul>
	</section>
		<section class="s-buy" id="g_buy">
			<div class="popup"  id="popup" style="-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px;display:none "></div>
			<ul class="s-buy-ul">
				<li class="s-buy-pro">
				<span class="pro-img">
					<input type="hidden" id="default_img" value="90" />
					<img src="{$t.pic}" id="pic_list" >
				</span>
					<div class="pro-info">
						<p class="name" >{$t.name}</p>
						<p class="pro-price" id="price">￥{$t.price}</p>
					</div>
					<i class="icon-close" id="icon_close" onclick="gw()"></i>
				</li>
			</ul>
			<hr class="with-margin-l" />
			<ul class="s-buy-ul specification" id="specification" style="z-index: 9000;">
				<li class="s-buy-li" >
					<div class="right" name="specvals" id="getpre" >
						{volist name="list" id="v"}
						<button class="select  gg" data-price="{$v.price}" data-id="{$v.id}" name="Span1">
							{$v.name}
						</button>
						{/volist}
					</div>
				</li>
				<hr class="with-margin-l" />
				<input type="hidden" id="goods_sku_num" value="100">
				<li class="s-buy-li">
					<div class="left" style="float:left;">购买数量：</div>
					<div class="right" id="num">
						<span class="reduce quantity-minus-disabled" >-</span>
						<input class="number" name="quantity"  autocomplete="off" value="1" min="1" max="2000" id="num1" />
						<span class="add" >+</span>
					</div>
					<!-- <span style="display: inline-block;margin-top:5px;color:#333;" id="Stock">剩余2000件</span> -->
				</li>
			</ul>
			<ul class="s-buy-ul">
				<li class="s-buy-btn">
					<a class="btn"  tag="buyBtn2" onclick="getinfo()" v-on:click="addToCart">{{addToCartBtnText}}</a>
					<input id="hiddPDetailID" type="hidden" value="59"/>
					<input id="hiddSkuId" type="hidden" />
					<input id="hiddSkuName" type="hidden" />
					<input id="hiddSkuprice" type="hidden" />
					<input id="hiddStock" type="hidden" value="2000"/>
					<input type="hidden" id="hidden_shop_name" value=""/>
					<input type="hidden" id="hidden_shop_id" value="0"/>
					<input type="hidden" id="is_sale" value="1" />
					<input type="hidden" id="goods_id" value="59" />
					<input type="hidden" id="code" value="76434700087" />
					<input type="hidden" id="max_buy" value="0" />
					<input type="hidden" id="min_buy" value="0" />
					<input type="hidden" id="hidden_current_num" value="0" />
					<input type="hidden" name="" value="{$t.price}" id="s_dj">
					<input type="hidden" id="s_zj"  name="">
				</li>
			</ul>
		</section>
<script type="text/javascript">
function getorder(){
 var gg=$(".s-buy-li .current").data('id');
 var zj=$("#s_zj").val();
 var ggt=$(".s-buy-li .current").text();
 var num=$("#num").val();
 var id="{$t.id}";
window.location.href="{:url('pay/weixin/productorder')}?id={$t.id}&gg="+gg+"&num="+num;
}

$(function () {
	  $(".gg").click(function(){
		$(".gg").removeClass('current');
		$(this).addClass('current');
      var price=$(this).data('price');
      $("#s_dj").val(price);
      all();
	});
	  $(".gg").eq(0).click();
});

function clickPoint(){
$(".fa-thumbs-up").css('color','orange');
}

function all(){
var dj=$("#s_dj").val()*1;
var num=$("#num").val()*1;
var zj=dj*num;
$("#price").text(""+zj.toFixed(2));
$("#zj").val(zj.toFixed(2));
console.log(dj,num);
}
</script>
		<script type="text/javascript">
            function getinfo(){
                //gg product_price表里id字段
                var gg=$(".s-buy-li .current").data('id');
                //gg product_price表里name字段
                var ggt=$(".s-buy-li .current").text();
				//加减的数量元素节点
                var num=$("#num").val();
				//product_1表里的id字段
                var id="{$t.id}";
//                window.location.href="{:url('weixin/cart/index')}?id={$t.id}&gg="+gg+"&num="+num;
            }

            $(function () {
                $(".gg").click(function(){
                    $(".gg").removeClass('current');
                    $(this).addClass('current');
                    var price=$(this).data('price');
                    $("#s_dj").val(price);
                    all();
                });
                $(".gg").eq(0).click();
            });

            function clickPoint(){
                $(".fa-thumbs-up").css('color','orange');
            }

            function all(){
                var dj=$("#s_dj").val()*1;
                var num=$("#num").val()*1;
                var zj=dj*num;
                $("#price").text(""+zj.toFixed(2));
                $("#zj").val(zj.toFixed(2));
                // console.log(dj,num);
                var num1 = document.getElementById('num1');
                num1.value = num
                // num1.innerText = num
                // console.log(num1.value,num1.innerText)
            }
		</script>


	<!-- 微信登录弹出绑定手机号遮罩层 -->
<!-- 	 -->
	
<div class="js-bottom-opts bottom-fix">
	<div class="responsive-wrapper">
		<a href="{:Url('business',['bid'=>$t['bid']])}" class="new-btn buy-cart" >
			<img src="{:_SKIN}/weixin/shopv3/pic/go_home_1.png" style="height:20px;margin-top: 4px;"/>
			<span class="desc">店铺</span>
		</a>
		<a href="" class="new-btn buy-cart" target="_blank">
			<img src="{:_SKIN}/weixin/shopv3/pic/kefux_1.png" style="height:20px;margin-top: 4px;"/>
			<span class="desc">客服</span>
		</a>
			<a id="global-cart" href="{:URL('Cart/index')}" class="new-btn buy-cart  ">
			<i class="fa fa-shopping-cart" style="font-size: 25px; margin-bottom: 4px;vertical-align"></i>
			<span class="desc">购物车</span>
		</a>
		<div class="big-btn-2-1">
			<span  class="big-btn orange-btn" id="getinfo" onclick="gw()"  >{{addToCartBtnText}}</span>
			<a href="javascript:;" class="big-btn red-btn" id="buyBtn1" onclick="gm()">立即购买</a>
		</div>
	</div>
</div>
<div class="btn_wrap btn_wrap_static btn_wrap_nocart no-server js-shelves">
	<div class="product-status">该商品已下架</div>
</div>

	
	<input type="hidden" value="" id="uid"/>
	<!-- 加载弹出层 -->
	<div class="mask-layer-loading">
		<img src="{:_SKIN}/weixin/shopv3/pic/mask_load_1.gif"/>
	</div>
	</div>
</body>
<script type="text/javascript">
	const goodsItemVm = new Vue({
		el:'#order',
		data:{
		    results:[],
			thumbs:[],
			goods:[],
			totalcount:0,
			showToast:false,
			showToastAlready:false,
			addToCartBtnText:'加入购物车',
			num:'',
			promptText:'',
			qrcode_status:false,
			status:0,
			endtime:''

		},
        mounted() {
            axios.get("{:url('shop/product')}")
                .then(function(response) {
                    goodsItemVm.$data.results = response.data.data;
                })
                .catch(function(error) {
                    console.log(error);
                });
        },
		methods:{
		    addToCart:function(){
		        var me = this;
		        var pid="{$t.id}";
                var price = $("#price").text();
                console.log(price);
                var name = $('#spname').text();
                var num = $('#num').val();
                var pic_list = $('#pic_list').attr('src');
                alert(pic_list);
		        axios.post("{:url('weixin/Cart/addCart')}",{
					price:price,
					spname:name,
					num:num,
					pid:pid,
					pic_list:pic_list,
				})
					.then(function (response) {
						if(parseInt(response.data.status) == 1){
								me.proptText="加入购物车成功!";
                            	alert(me.proptText);
						}
                    })

			}
		}

	})
</script>
</html>